<template>
    <!-- 前处理报表 -->
    <div class="main-container" id="main-container">
        <div style="background: #fff; height: 100%" id="pretreatmentReport">
            <pageTabelLayout>
                <template #pageHeader>
                    <div class="my-header"
                        style="padding:10px 10px 10px; display: flex; justify-content: space-between;align-items: center;padding;"
                        v-if="headerShow">
                        <div>
                            <a-form size="small" :model="pageData" layout="inline">
                                <a-form-item label="车间名称">
                                    <a-input class="bacClass" style="width:200px" v-model="searchData.workshop" />
                                </a-form-item>
                                <a-form-item label="当班日期">
                                    <a-range-picker popup-container="html" class="bacClass" clear style="width: 250px;"
                                        @change="changePicker" />
                                </a-form-item>
                            </a-form>
                        </div>
                        <div class="my-tool-bar">
                            <Toolbar :items="['查询', '打印']" @select="selectHandler" @dyBoufei="dyBoufeiHandler" />
                        </div>
                    </div>
                    <div class="my-divisders">
                        <a-divider orientation="center">
                            <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
                            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
                        </a-divider>
                    </div>
                </template>
                <template #pageTabel>
                    <div class="printBox" id="printBox">
                        <div class="reportHead">
                            <h3>前处理生产日报表</h3>
                            <h4>产量报表</h4>
                        </div>
                        <table class="mytable">
                            <thead>
                                <tr>
                                    <th :rowspan="2">机台</th>
                                    <th :colspan="2" v-for="item in reportData.unitArr">{{ item.unit }}</th>
                                    <th :colspan="2">合计</th>
                                </tr>
                                <tr>
                                    <template v-for="count in reportData.unitArr" :key="count">
                                        <th>生产工艺</th>
                                        <th>产量(吨)</th>
                                    </template>
                                    <th>生产工艺</th>
                                    <th>产量(吨)</th>
                                </tr>
                            </thead>
                            <tbody v-for="(item, tIndex) in reportData.newDeviceArr">
                                <tr v-for="count in item.child.length">
                                    <td :rowspan="item.child.length" v-if="count == 1">{{ item.device }}</td>
                                    <template v-for="(vItem, index) in item.child">
                                        <template v-if="index == count - 1">
                                            <template v-for="sItem in vItem">
                                                <td>{{ sItem.process || '' }}</td>
                                                <td>{{ sItem.canUseWeight || '' }}</td>
                                            </template>
                                            <td>{{ vItem[0].process }}</td>
                                            <td>{{ formateAmountTo(vItem) }}</td>
                                        </template>
                                    </template>
                                </tr>
                                <tr>
                                    <td>小计</td>
                                    <template v-for="count in reportData.unitArr" :key="count">
                                        <td></td>
                                        <td>{{ formateUnitAmountTo(count.unit, item) }}</td>
                                    </template>
                                    <td></td>
                                    <td>
                                        {{ formateUnitRowAmountTo(item) }}
                                    </td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                    <td>合计</td>
                                    <template v-for="count in reportData.unitArr" :key="count">
                                        <td></td>
                                        <td>{{ formateColAmountTo(count) }}</td>
                                    </template>
                                    <td></td>
                                    <td>
                                        {{ formatAll(reportData.newDeviceArr) }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                </template>
            </pageTabelLayout>
        </div>
    </div>
</template>

<script setup lang="ts">
import { infoProcess } from '@/api/DyeingshopManagement/reportProcess';
import { Message } from '@arco-design/web-vue';
import { reactive, ref } from 'vue';
import printJS from 'print-js'

const headerShow = ref<boolean>(true)
const infoProcessApi = infoProcess();
const searchData = reactive<{
    workshop: string,
    createTime: string,
    createTime2: string
}>({
    workshop: "",
    createTime: "",
    createTime2: ''
});
const reportData = reactive<{
    unitArr: any[],
    newDeviceArr: any[],
}>({
    unitArr: [],
    newDeviceArr: []
});
const changePicker = (date: any) => {
    searchData.createTime = date ? date[0] : '';
    searchData.createTime2 = date ? date[1] : '';
};
const selectHandler = async () => {
    let res = await infoProcessApi.getProcess({ ...searchData });
    if (res.code === 200) {
        let rDataList = res.data.list;
        reportData.unitArr = arrayToTree(rDataList, 'unit');
        let listUnitName = reportData.unitArr.map((v: any, i: any) => { return { unit: v.unit, index: i } });
        reportData.newDeviceArr = arrayToTree(rDataList, 'device');
        /**
         * 数据整合
         */
        reportData.newDeviceArr.forEach((v: any) => {
            let newArr: any = [];
            for (let i in v.child) {
                let list3: any = [];
                for (let j in v.child) {
                    if (v.child[i].process == v.child[j].process && v.child[j].key != 1) {
                        v.child[j].key = 1
                        list3.push(v.child[j]);
                    }
                }
                if (list3.length > 0) {
                    newArr.push(list3);
                }
            };
            v.child = newArr;
        });
        /**
         * 数据补空
         */
        reportData.newDeviceArr.forEach((v: any) => {
            v.child = v.child.map((item: any,) => {
                item = item.map((vItem: any, i: number, arr: any) => {
                    if (arr.length !== listUnitName.length) {
                        arr = new Array(listUnitName.length).fill({ process: vItem.process, unit: vItem.unit });
                        listUnitName.forEach((sItem: any, z: number) => {
                            // console.log(vItem, vItem.unit === sItem.unit, sItem.unit);
                            if (vItem.unit === sItem.unit) {
                                arr[sItem.index] = vItem
                            }
                        });
                    }
                    return arr;
                });
                return item[0]
            });

        });
        console.log(reportData.newDeviceArr);
    } else {
        Message.error('数据查询失败')
    }
};

/**
 * 横向合计计算
 */
let formateAmountTo = ref();
formateAmountTo.value = (data: any) => {
    let proceeAllNum = 0;
    data.forEach((v: any) => {
        proceeAllNum += v.canUseWeight ? v.canUseWeight : 0
    });
    return proceeAllNum.toFixed(2);
};

/**
 * 小计计算
 */
let formateUnitAmountTo = ref();
formateUnitAmountTo.value = (unit: string, data: any) => {
    let proceeAllNum = 0
    data.child.forEach((v: any) => {
        v.forEach((item: any) => {
            if (item.unit === unit) {
                proceeAllNum += item.canUseWeight ? item.canUseWeight : 0
            };
        })
    });
    return proceeAllNum.toFixed(2);
};

/**
 * 纵向合计计算
 */
let formateColAmountTo = ref();
formateColAmountTo.value = (data: any) => {
    //  console.log(count);
    let proceeAllNum = 0
    data.child.forEach((v: any) => {
        proceeAllNum += v.canUseWeight ? v.canUseWeight : 0
    });
    return proceeAllNum.toFixed(2);
}

/**
 * 小计合算
 */
let formateUnitRowAmountTo = ref();
formateUnitRowAmountTo.value = (data: any) => {
    // console.log(data);
    let proceeAllNum = 0;
    data.child.forEach((v: any) => {
        v.forEach((item: any) => {
            proceeAllNum += item.canUseWeight ? item.canUseWeight : 0
        })
    });
    return proceeAllNum.toFixed(2);
}
/**
 * 全合计
 */
let formatAll = ref();
formatAll.value = (newDeviceArr: any) => {
    let proceeAllNum = 0;
    if (newDeviceArr) {
        newDeviceArr.forEach((v: any) => {
            v.child.forEach((item: any) => {
                item.forEach((vItem: any) => {
                    proceeAllNum += vItem.canUseWeight ? vItem.canUseWeight : 0
                })
            });
        });
        return proceeAllNum.toFixed(2);
    }



}

//构建树
const arrayToTree = (arr: any, target: any) => {
    let obj = [];
    for (let i in arr) {
        obj.push(arr[i][target])
    };
    let newArr = [...new Set([...obj])].map((v: any) => { return { [target]: v, child: [] } });
    for (let i in arr) {
        newArr.forEach(v => {
            if (v[target] === arr[i][target]) {
                v.child.push(arr[i] as never);
            }
        })
    };
    return newArr
}



selectHandler();
const dyBoufeiHandler = () => {
    printJS({
        printable: 'printBox',
        type: 'html',
        targetStyles: ['*'],
        // maxWidth:1200,
        // scanStyles:false
    })
}
</script>

<style lang="less" scoped>
.main-container {
    height: 100%;
}

.aInput {
    background: #fff;
    width: 270px;
    border: 1px solid #c9cdd3;
}

.printBox {

    // overflow: hidden;
    // max-width: 800px;
    // margin: 0 auto;
    width: 1200px;
    text-align: center;

    .reportHead {

        h3,
        h4 {
            font-weight: bold;
            // text-align: center;
            font-size: 24px;
        }

        h3 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        margin-bottom: 10px;
    }


    .mytable {
        // max-width: 1200px;
        // margin: 0 auto;
        width: 1200px;

        th,
        td {
            padding: 5px;
            border: 1px solid #e3e3e3;
        }

        td {
            text-align: center;
        }

        th {
            background: rgb(247, 248, 250);
        }
    }
}





// @media print {c 

//     html,
//     body {
//         height: inherit;
//     }
// }</style>